<script setup>
import ScrollToTop from '@core/components/ScrollToTop.vue'
import initCore from '@core/initCore'
import {
  initConfigStore,
  useConfigStore,
} from '@core/stores/config'
import { hexToRgb } from '@core/utils/colorConverter'
import { ElConfigProvider } from 'element-plus'
import { useTheme } from 'vuetify'

const { global } = useTheme()

// ℹ️ Sync current theme with initial loader theme
initCore()
initConfigStore()

const configStore = useConfigStore()
</script>

<template>
  <ElConfigProvider :locale="locale">
    <VLocaleProvider :rtl="configStore.isAppRTL">
      <!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
      <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
        <RouterView />

        <ScrollToTop />
      </VApp>
    </VLocaleProvider>
  </ElConfigProvider>
</template>

<style lang="scss">
.content {
  border-radius: 5px;
  //background: #fff;
  inline-size: 100%;
}

.v-data-table-footer {
  display: none !important;
}

v-deep .el-pager li.is-active,
.el-pager li:hover {
  color: #8c57ff !important;
}
.v-data-table-header__content {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss01' on, 'ss04' on;
  font-family: "PingFang SC";
  font-size: 14px;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}
.v-data-table__tr {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss01' on, 'ss04' on;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}
.nav-header {
  padding: 0px !important;
}
.nav-link {
  padding-bottom: 10px !important;
}
.dialog-body{
  background: rgb(var(--v-theme-surface));
}
.options-right-display {
  justify-content: right;
}
.flex-box{
  display: flex;
  align-items: center;
}
.tabs{
  margin-left: 30px;
  display: flex;
  align-items: center;
  .active{

    background-color:rgba(140, 87, 255, 0.16);
    border-radius: 6px;
    color: rgba(140, 87, 255, 1);
  }
  .item{
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 16px;
    align-items: center;
    width: 128px;
    height:38px;
    margin-right: 4px;
    cursor: pointer;
    >i{
      font-size: 18px;
      margin-right: 4px;
    }
  }
}

.menu-box{
  border-radius: 6px;
  position: absolute;
  top: 50px;
  right:25px;
  width: 310px;
  background-color: #fff;
  z-index:999;
}
</style>
